<script setup lang="ts">
import { ref } from 'vue'
import axios from 'axios'
// import type { AxiosProgressEvent } from 'axios'
const src = ref('')
// let processBar = ref(0)

const fileSize = 158891 // b
const chunkSize = 100000 // kb

/* // 开始节点
	let start = 0;
	// 结束节点
	let end = chunkSize -1;
	if(fileSize < chunkSize){
		end = fileSize - 1;
	} */
// 计算需要多少分片
const numChunks = Math.ceil(fileSize / chunkSize)
// 所有分片信息
let chunkData: Blob[] = []
// 分割文件
const chunkCounts = []
let start = 0
let end = 0
for (let i = 0; i < numChunks; i++) {
  end = start + chunkSize
  if (end > fileSize) {
    end = fileSize
  }
  chunkCounts.push({ start, end })
  start = end
}

const requests = chunkCounts.map(({ start, end }) => {
  const range = `bytes=${start}-${end}`
  return getData(range)
})
Promise.all(requests).then(function (result) {
  let contentDisposition = ''
  chunkData = []
  result.forEach((item) => {
    if (item) {
      contentDisposition = item.headers['content-disposition']
      chunkData.push(item.data)
    }
  })

  const contentDispositionArr: string[] = contentDisposition.split(';')
  const contentDispositionFilename = contentDispositionArr.find((item) => item.includes('filename'))
  const filename = contentDispositionFilename ? contentDispositionFilename.split('=')[1] : ''

  const blob = new Blob(chunkData, { type: 'application/pdf' })
  const url = URL.createObjectURL(blob)
  src.value = url
  console.log(filename, decodeURIComponent(filename), chunkData)

  // 下载完整文件
  /* document.title = decodeURIComponent(filename)
  const a = document.createElement('a')
  a.href = url
  a.download = decodeURIComponent(filename)
  document.body.appendChild(a)
  a.click()
  document.body.removeChild(a) */
})

// let flag = true
function getData(range: string) {
  const url = '/file/download/pdf/slice'
  // if(flag){
  //   url+=1
  // }
  return axios<Blob>({
    url,
    // url:'/zlwx/sysFile/getPlan',
    // params:{
    //   key:'3500202407024698838669D340E5ED2D'
    // },
    // `headers` 是即将被发送的自定义请求头
    headers: { Range: range },
    responseType: 'arraybuffer'
    // arraybuffer
    // `onUploadProgress` 允许为上传处理进度事件
    // onUploadProgress: function (progressEvent) {
    //   // Do whatever you want with the native progress event
    //   // console.log(progressEvent)
    // },

    // // `onDownloadProgress` 允许为下载处理进度事件
    // onDownloadProgress: function (progressEvent: AxiosProgressEvent) {
    //   const { loaded = 0, total = 0 } = progressEvent
    //   processBar.value = Math.round(total ? (loaded / total) * 100 : 0)
    //   // console.log(progressEvent, processBar)

    //   // 对原生进度事件的处理
    // }
    // `maxContentLength` 定义允许的响应内容的最大尺寸
    // maxContentLength: chunkSize+10
  })
    .then((res) => {
      console.log(res)

      // const {type}=res.data

      // const url = window.URL.createObjectURL(res.data)
      // console.log(url)
      // src.value = url

      return res
    })
    .catch((error) => {
      console.log(error)
    })
}
</script>

<template>
  <div>
    <iframe :src="src"></iframe>
    <l-download></l-download>
  </div>
</template>
